<template>
  <div id="app" >
    
    <el-container class="container"> 
      <el-header class="header">
        <i class="el-icon-s-grid" :class="show?'unfold-button':'fold-button'" @click="show=!show"></i>
        <div><img alt="Vue logo" style="height:30px" src="./assets/logo.png"></div>
        <div class="input"><el-input v-model="input" placeholder="请输入内容" maxlength=50 minlength=50 ></el-input>
        <el-button type="primary" icon="el-icon-search" style="margin-left:10px;margin" size="mini"></el-button>
        </div>
         
      </el-header>
       <el-container>
<transition name="el-fade-in-linear">

          <el-aside v-show='show' style="width:15%;height:100vh;" class="sidebar-menu">  

            <el-col>
    <el-menu :router="false" ref="menu" @select="select"> 

      <el-menu-item index="index">
        <i class="el-icon-menu"></i>
        <span slot="title">首页</span>
      </el-menu-item>

      <el-menu-item index="video">
        <template slot="title">
          <i class="el-icon-location"></i>
          <span>在线播放</span>
        </template>
       
      </el-menu-item>
      <el-menu-item index="hot">
        <i class="el-icon-menu"></i>
        <span slot="title">热播推荐</span>
      </el-menu-item>

      <el-submenu index="douban">
       
        <span slot="title"> <i class="el-icon-s-help"></i>豆瓣推荐</span>
        <el-menu-item index='douban?type=serial'>
         美剧
        </el-menu-item>
         <el-menu-item index='douban?type=cartoon'>
         动漫
        </el-menu-item>
         <el-menu-item index='douban?type=movie'>
         电影
        </el-menu-item>
        <el-menu-item index='douban?type=tv'>
         电视剧
        </el-menu-item>
      </el-submenu>
      <el-menu-item index="history" >
        <i class="el-icon-document"></i>
        <span slot="title">历史记录</span>
      </el-menu-item>
      <el-menu-item index="collection">
        <i class="el-icon-setting"></i>
        <span slot="title">我的收藏</span>
      </el-menu-item>
    </el-menu>
          </el-col>

          </el-aside>
</transition>
      <el-main style="margin:0;padding:0;">
       <router-view> </router-view>
      </el-main>

        
       </el-container>

    </el-container>
   
    
  </div>
  
</template>

<script>

export default {
  name: 'App',
  components: {
  
  },
  data(){
    return{
      input:'',
      show:true,
      route:false
    }
  },
 methods:{
    select(e){
     
      this.$router.push('/'+e)
    }
  },
  mounted(){
    console.log(localStorage.data)
    var str=localStorage.data
    var arr=str.split("//")
    arr=arr.slice(0,arr.length-1)
    this.$store.commit('historyInit',arr)
    console.log(arr)
  }
}
</script>

<style>
#app{
  height: 100vh;
  overflow: auto;
}

html{
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.sidebar-menu{
border-right:1px solid #E6E6E6 ;
padding-left:3px ;
overflow-x: hidden;
box-sizing: border-box;
}
.header{
  margin-top: 15px;
  border-bottom:1px solid #E6E6E6 ;
  display: flex;
  justify-content: space-between;
  align-items: center;
  
}
.input{
  width: 20%;
  display: flex;
}
.unfold-button{
font-size: 2.5rem;
color: #409EFF;
}
.fold-button{
  font-size: 2.5rem;
  color: #909399;
}

</style>
